<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>BOM结构</span>
          </div>
          <div style="height: 600px">
            <div class="head-container">
              <el-input
                v-model="filterText"
                clearable
                size="small"
                placeholder="输入名称搜索"
                prefix-icon="el-icon-search"
                class="filter-item"
              />
            </div>
            <el-tree
              class="filter-tree"
              :data="bomTree"
              :props="defaultProps"
              default-expand-all
              ref="tree">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <el-tooltip  :content="'[编码]：'+data.code  +  ' [数量]：'+(data.type ? data.type : '')" placement="bottom" effect="light">
                  <span style=" font-size: 14px;" >
                    {{ node.label }}
                  </span>
                </el-tooltip>
              </span>
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ bomInf.bomName }}</span>
            <div style="float: right">
              <el-button
                v-permission="permission.edit"
                class="filter-item"
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="crud.toEdit(bomInf)"
                :disabled="!bomInf.id"
              >
                编辑
              </el-button>
              <!--表单组件-->
              <el-dialog
                :close-on-click-modal="false"
                :before-close="crud.cancelCU"
                :visible.sync="crud.status.cu > 0"
                :title="crud.status.title"
                width="530px"
              >
                <el-form
                  ref="form"
                  :model="form"
                  :rules="rules"
                  size="small"
                  label-width="90px"
                >
                  <el-form-item label="BOM编号" prop="bomCode">
                    <el-input v-model="form.bomCode" style="width: 370px" />
                  </el-form-item>
                  <el-form-item label="BOM名称" prop="bomName">
                    <el-input v-model="form.bomName" style="width: 370px" />
                  </el-form-item>
                  <el-form-item label="产品型号" prop="productCode">
                    <el-select
                      v-model="form.productCode"
                      clearable
                      filterable
                      placeholder="产品型号"
                      style="width: 370px"
                      class="filter-item"
                    >
                      <el-option
                        v-for="item in productModel"
                        :key="item.id"
                        :label="item.productName"
                        :value="item.productCode"
                      >
                        <span style="float: left">{{ item.productName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{
                            item.productCode
                          }}</span></el-option
                      >
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否禁用" prop="isDisable">
                    <el-radio-group v-model="form.isDisable">
                      <el-radio :label="item.value" v-for="item in dict.is_disable">{{item.label}}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="版本" prop="version">
                    <el-input v-model="form.version" style="width: 370px" />
                  </el-form-item>
                  <el-form-item label="描述">
                    <el-input
                      v-model="form.remark"
                      :rows="3"
                      type="textarea"
                      style="width: 370px"
                    />
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button type="text" @click="crud.cancelCU">取消</el-button>
                  <el-button
                    :loading="crud.status.cu === 2"
                    type="primary"
                    @click="crud.submitCU"
                  >确认</el-button
                  >
                </div>
              </el-dialog>
            </div>
          </div>
          <el-descriptions>
            <el-descriptions-item label="BOM编号">{{ bomInf.bomCode }}</el-descriptions-item>
            <el-descriptions-item label="产品型号">{{ bomInf.productCode }}</el-descriptions-item>
            <el-descriptions-item label="是否禁用">
              <el-tag size="small">{{
                  dict.label.is_disable[bomInf.isDisable]
                }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="版本">{{ bomInf.version }}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{ bomInf.createBy }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ bomInf.createTime }}</el-descriptions-item>
            <el-descriptions-item label="更新人">{{ bomInf.updateBy }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ bomInf.updateTime }}</el-descriptions-item>
            <el-descriptions-item label="描述">{{ bomInf.remark }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card class="box-card" style="margin-top: 15px">
          <div slot="header" class="clearfix">
            <span>制造BOM物料清单</span>
          </div>
<!--          <localDetail ref="local" />-->
          <bomDetail ref="detail" :initBomTree="initBomTree" ></bomDetail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import bomDetail from "../bom_detail/index";
import crudProductBom from "@/api/product/productBom";
import crudProductModel from "@/api/product/productModel";
import CRUD, { presenter, form, crud } from "@crud/crud";

const defaultForm = {
  id: null,
  productCode: null,
  bomCode: null,
  bomName: null,
  isDisable: null,
  version: null,
  remark: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
};
export default {
  name: "BomDetail",
  components: { bomDetail },
  mixins: [presenter(), form(defaultForm), crud()],
  dicts: ["is_disable"],
  cruds() {
    return CRUD({
      title: "制造BOM明细",
      url: "api/productBom",
      idField: "id",
      sort: "id,desc",
      queryOnPresenterCreated: false,
      crudMethod: { ...crudProductBom },
    });
  },
  data() {
    return {
      filterText: '',
      bomTree: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      permission: {
        add: ["admin", "productBom:add"],
        edit: ["admin", "productBom:edit"],
        del: ["admin", "productBom:del"],
      },
      rules: {
        productCode: [
          { required: true, message: "产品编码不能为空", trigger: "change" },
        ],
        bomCode: [
          { required: true, message: "BOM编码不能为空", trigger: "blur" },
        ],
        bomName: [
          { required: true, message: "BOM名称不能为空", trigger: "blur" },
        ],
        version: [{ required: true, message: "版本不能为空", trigger: "blur" }],
        isDisable: [
          { required: true, message: "是否禁用不能为空", trigger: "blur" },
        ],
      },
      bomInf: defaultForm,
      productModel: [],
    };
  },
  methods: {
    // 详情刷新之后
    [CRUD.HOOK.afterRefresh]() {
      this.bomInf = this.crud.data.length > 0 ? this.crud.data[0] : defaultForm;
      this.$refs.detail.queryPage(this.bomInf.id,this.bomInf.productCode);
      return true;
    },
    initBomTree(id){
      //获取BOM树结构
      crudProductBom.getBomTree({id: id}).then(res =>{
        this.bomTree = res;
      })
    },
    //初始化数据
    initData(){
      const id = this.$route.params.id;

      //查询BOM头部信息
      this.crud.params.id = id;

      //获取参数集数据
      this.crud.toQuery();



    }
  },
  mounted() {

    //初始化BOM结构
    //this.initBomTree(id);

this.initData();

    //查询产品信息
    crudProductModel.list().then((data) => {
      this.productModel = data;
    });

  },
};
</script>

<style scoped>
</style>
